<template>
  <div class="container">
    <el-dialog
      title="中仓采购要票单详情"
      :visible.sync="dialog.dialogVisible"
      width="95%"
      center
      @open="getData"
      :lock-scroll="true"
      @close="closeDialog"
    >
      <el-table
        :data="tableData"
        border
        max-height="600"
        :summary-method="getSummaries"
        show-summary
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column label="操作" width="280" align="center">
          <template slot-scope="scope">
             <el-button
              size="mini"
              v-if="scope.row.status != 2"
              type="primary"
              icon="el-icon-view"
              @click="lookBtn(scope)"
              >查看发票</el-button
            >
            <el-button
              size="mini"
              v-if="scope.row.status == 2"
              type="warning"
              icon="el-icon-finished"
              @click="compulsoryBtn(scope)"
              >强制完成</el-button
            >
            <el-button
              size="mini"
              v-if="scope.row.status == 2"
              type="success"
              icon="el-icon-sort"
              @click="synchronizeBtn(scope)"
            >
              同步发票信息</el-button
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="statusMsg"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column
          width="200px"
          prop="invoice_name"
          label="发票商品名称"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              @change="revise(scope)"
              :disabled="scope.row.status == 4"
              v-model="scope.row.invoice_name"
              placeholder="请输入商品名称"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          width="130px"
          prop="invoice_spec"
          label="发票规格"
          align="center"
          ><template slot-scope="scope">
            <el-input
              @change="revise(scope)"
              :disabled="scope.row.status == 4"
              v-model="scope.row.invoice_spec"
              placeholder="请输入规格"
            ></el-input> </template
        ></el-table-column>
        <el-table-column
          prop="invoice_unit"
          label="发票单位"
          width="130px"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              @change="revise(scope)"
              :disabled="scope.row.status == 4"
              v-model="scope.row.invoice_unit"
              placeholder="请输入单位"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="invoice_amount"
          width="150"
          label="发票金额"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              @change="revise(scope)"
              :disabled="scope.row.status == 4"
              v-model="scope.row.invoice_amount"
              placeholder="请输入发票金额"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="invoice_tax_amount"
          label="发票税额"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-input
              @change="revise(scope)"
              :disabled="scope.row.status == 4"
              v-model="scope.row.invoice_tax_amount"
              placeholder="请输入发票税额"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="invoice_num"
          width="150"
          label="发票数量"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              :precision="4"
              @change="revise(scope)"
              :disabled="scope.row.status == 4"
              v-model="scope.row.invoice_num"
              placeholder="请输入发票数量"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="invoice_price"
          width="150"
          label="发票单价"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              :precision="6"
              @change="revise(scope)"
              :disabled="scope.row.status == 4"
              v-model="scope.row.invoice_price"
              placeholder="请输入发票单价"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="goods_name"
          label="名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_code"
          label="Code"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="unit"
          label="单位"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="erp_spec"
          label="规格"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_num"
          label="数量"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="goods_price"
          label="单价"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="总金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="use_amount"
          label="已匹配金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="un_tax_price"
          label="不含税单价"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="un_tax_amount"
          label="不含税金额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tax_amount"
          label="税额"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tax_ratio"
          label="税率(%)"
          align="center"
        ></el-table-column>
      </el-table>
      <el-dialog
        width="80%"
        center
        title="发票列表"
        :visible.sync="innerDialog"
        append-to-body
      >
        <div class="tagCenter">
          <el-tag v-for="item in tags" :key="item.fphm">{{ item.fphm }}</el-tag>
        </div>
      </el-dialog>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirm()">保存发票商品</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <!-- <pagination
      @page="handleSizeChange"
      @pagesize="handleCurrentChange"
      :pageData="pageData"
    ></pagination> -->
  </div>
</template>
<script>
import {
  ticketDetail,
  modifyTicket,
  showFphm,
  compel,
  syncTicket
} from "@/api/bill";
import Pagination from "@/components/pagination";
export default {
  props: {
    dialog: Object,
    pagination: Pagination
  },
  data() {
    return {
      tableData: [],
      innerDialog: false,
      idList: [],
      tags: [],
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper"
      }
    };
  },
  created() {},
  methods: {
    //同步发票
    synchronizeBtn(scope) {
      let data = {
        id: scope.row.tpl_id,
        detail_id: scope.row.id
      };
      this.$confirm("是否同步发票?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          syncTicket(data).then(res => {
            if (res.code == 0) {
              this.getData();
              this.$message({
                type: "success",
                message: res.msg || res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 强制完成
    compulsoryBtn(scope) {
      let data = {
        id: scope.row.tpl_id,
        detail_id: scope.row.id
      };
      this.$confirm("是否强制完成?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          compel(data).then(res => {
            if (res.code == 0) {
              this.getData();
              this.$message({
                type: "success",
                message: res.msg || res.message
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //查看发票
    lookBtn(scope) {
      this.innerDialog = true;
      let data = {
        id: scope.row.tpl_id,
        detail_id: scope.row.id
      };
      showFphm(data).then(res => {
        if (res.code == 0) {
          this.tags = res.data.list;
        }
      });
    },
    //总价
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (
            index != 4 &&
            index != 5 &&
            index != 6 &&
            index != 7 &&
            index != 12 &&
            index != 14 &&
            index != 15 &&
            index != 16 &&
            index != 17 &&
            index != 18
          ) {
            sums[index] = "";
          } else {
            sums[index] = sums[index].toFixed(4);
          }
        } else {
          sums[index] = "";
        }
      });

      return sums;
    },
    getData() {
      let data = {
        id: this.dialog.id
      };
      ticketDetail(data).then(res => {
        if (res.code == 0) {
          res.data.details.forEach(prop => {
            switch (prop.status) {
              case 1:
                prop.statusMsg = "已生成未审核";
                break;
              case 2:
                prop.statusMsg = "未开发票";
                break;
              case 3:
                prop.statusMsg = "已开部分开票";
                break;
              case 4:
                prop.statusMsg = "已开发票";
                break;
            }
          });
          this.tableData = res.data.details;
        }
      });
    },
    //修改
    revise(scope) {
      if (this.idList.length == 0) {
        this.idList.push(scope.row.id);
      } else {
        let bool = this.idList.some(res => {
          return res == scope.row.id;
        });
        if (!bool) {
          this.idList.push(scope.row.id);
        }
      }
    },
    //保存
    confirm() {
      if (this.idList.length == 0) {
        this.$message({
          message: "请修改发票商品",
          type: "info"
        });
        return;
      }
      let arrData = [];
      this.idList.forEach(item => {
        this.tableData.forEach(prop => {
          if (item == prop.id) {
            arrData.push({
              id: prop.id,
              invoice_name: prop.invoice_name,
              invoice_spec: prop.invoice_spec,
              invoice_unit: prop.invoice_unit,
              invoice_num: prop.invoice_num,
              invoice_price: prop.invoice_price,
              invoice_amount: prop.invoice_amount,
              invoice_tax_amount: prop.invoice_tax_amount
            });
          }
        });
      });
      let data = {
        id: this.dialog.id,
        goods: JSON.stringify(arrData)
      };
      modifyTicket(data).then(res => {
        if (res.code == 0) {
          this.$message({
            type: "success",
            message: res.msg || res.message
          });
          this.closeDialog();
        }
      });
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;
      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;
      this.getData();
    },
    //取消
    closeDialog() {
      this.tableData = [];
      this.idList = [];
      this.dialog.dialogVisible = false;
    }
  }
};
</script>
<style scoped>
.top {
  position: relative;
  /* height: 40px; */
}
.main {
  display: flex;
  justify-content: center;
}
.add {
  margin: 10px 0;
  margin-left: auto;
}
.inp {
  border: 1px solid #eee;
  width: 500px;
  padding-left: 10px;
  border-radius: 5px;
  height: 42px;
}
</style>
